<template>
	<view v-if="data" class="radius-12 bg-white px-12 py-16 mx-16 mb-16" :class="$attrs" @click="toMerchantHomePage">
		<view class="flex item-center">
			<image class="cu-avatar round size-44 mr-8" :src="data.logo"></image>
			<view>
				<view class="fs-16">{{data.businessShortName}}</view>
				<view class="mt-2 fs-12 text-color-hint">{{data.subscribeCount}}人订阅｜{{data.activeCount}}个活动</view>
			</view>
		</view>
		<view class="mt-8 flex item-center fs-12 text-color-hint">
			<image class="size-12 mr-4" src="@/static/svg/activity/icon-location.svg"></image>
			<text>{{data.address}}</text>
		</view>
		<template v-if="data.searchBusinessActives">
			<view class="h-1 bg-default my-8"></view>
			<view class="grid-container">
				<view v-for="(item, i) in data.searchBusinessActives" :key="i">
					<view class="relative radius-8 overflow-hidden fs-0">
						<image class="radius-8" style="height:105px;" :src="getActiveImg(item)"></image>
						<view v-if="false" class="bg-price absolute">
							<text class="fs-12 text-white">¥188.99</text>
						</view>
					</view>
					<view class="mt-8 fs-14 font-semibold">{{item.activeTitle}}</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
import { computed } from 'vue';
	
	const props = defineProps({
		data: {
			type: Object,
			required: true
		}
	})
	
	const getActiveImg = (item) => {
		return item && item.activeImg && item.activeImg.split(',')[0]
	}
	
	const toMerchantHomePage = () => {
		uni.navigateTo({
			url: `/pagesA/merchant/homepage?id=${props.data.businessId}`
		})
	}
</script>

<style lang="scss">
	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, calc((100% - 12px)/3));
		grid-column-gap: 6px;
	}
	.bg-price {
		background: url('bg-price.svg') no-repeat;
		background-size: 100% 100%;
		padding: 0 4px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
</style>